<script setup>
import { reactive, ref, onBeforeMount, } from 'vue'
import { useRouter } from "vue-router";
import { get_address, pre_order, perProductOrder } from '@/utils/api'
import { defaultNavigator } from '@vueuse/core';
import { dataType } from 'element-plus/es/components/table-v2/src/common';
// 

const router = useRouter();

const data = reactive({
    totalPriceall: '',
    coupon_id: null,//优惠券
    adresList: [],
    goodsInfo: null,// 商品列表
    activeAdress: 0, //当前选中地址的index
    query: router.currentRoute.value.query, //购物车订单预览商品的id   cart_id
})
const checked1 = ref(true)
onBeforeMount(() => {
    get_address().then(res => {
        data.adresList = res.data
        data.adresList.forEach((item,index)=>{
            if(item.is_default==1){
                data.activeAdress=index
            }
        })
        // 代表是购物车订单阅览
        getinfo() 
    }) 
})
const getinfo = () => {
    if (data.query.cart_id) {
        pre_order({ cart_id: data.query.cart_id, address_id: data.adresList[data.activeAdress].id }).then(res => {
            if (res.code == 200) {
                data.goodsInfo = res.data
                data.totalPriceall = res.data.total.total_real_price
                data.goodsInfo.coupon.unshift({
                    coupon_id: '',
                    full_text: '不使用优惠券'
                })
            }
        })
    } else {
        perProductOrder({ data: JSON.parse(data.query.orderinfo), address_id: data.adresList[data.activeAdress].id }).then(res => {
            if (res.code == 200) {
                data.goodsInfo = res.data
                data.totalPriceall = res.data.total.total_real_price
                data.goodsInfo.coupon.unshift({
                    coupon_id: '',
                    full_text: '不使用优惠券'
                })
            }
        })
    }
}
const submit = () => {
    // 购物车去创建订单
    if (data.query.cart_id) {
        let data1 = {
            cart_id: data.query.cart_id,
            anonymous: checked1.value ? 1 : 0,
            address_id: data.adresList[data.activeAdress].id,
            type: 1,
            totalPrice: data.totalPriceall,
            mark: '', 
        }
        if (data.coupon_id) {
            data1 = Object.assign(data1, { coupon_id: data.coupon_id })
        }

        router.replace({
            path: '/pay',
            query: data1
        })
    } else {
        // 详情去创建订单
        let data1 = {
            anonymous: checked1.value ? 1 : 0,
            address_id: data.adresList[data.activeAdress].id,
            type: 2,
            totalPrice: data.totalPriceall,
            mark: '',
            data: data.query.orderinfo
        }
        if (data.coupon_id) {
            data1 = Object.assign(data1, { coupon_id: data.coupon_id })
        }
        router.replace({
            path: '/pay',
            query: data1
        })
    }


}
const addressChange = () => {
    getinfo()
}
const selchange = () => {
    let itemco = {}
    data.goodsInfo.coupon.forEach(item => {
        console.log(item.coupon_id == data.coupon_id, item.coupon_id, data.coupon_id)
        if (item.coupon_id == data.coupon_id) {
            itemco = item
        }
    })
    if (data.coupon_id) {
        if (itemco.coupon_type == 1) { //满减卷
            data.totalPriceall = (data.goodsInfo.total.total_price - itemco.coupon_price + data.goodsInfo.total.total_free).toFixed(2)
        } else {
            // 折扣券 
            data.totalPriceall = (data.goodsInfo.total.total_price * (itemco.discount / 10) + data.goodsInfo.total.total_free).toFixed(2)
        }
    } else {
        data.totalPriceall = data.goodsInfo.total.total_real_price
    }
    console.log(data.coupon_id, '选择优惠券')
}
</script>

<template>
    <div class="wrapCenter" v-if="data.goodsInfo">
        <div class="top flex">
            <img src="../../assets/logo.png" style="width: 160px;height: 60px;" alt="">
            <span class="fontS20">确认订单</span>
        </div>
        <div class="title fontS16 flexJBC marB2">
            <span>确认收货地址</span>
            <span class="cur" @click=" router.push({path:'/set',query:{index:2}})">使用新地址</span>
        </div>
        <div class="adress">
            <el-radio-group v-model="data.activeAdress" @change="addressChange">
                <div class="ad_li flexJBC" style="width:1472px" :class="data.activeAdress == index ? 'add_check' : ''"
                    v-for="(item, index) in data.adresList" :key="item.id">
                    <div class=" flex fontS18 homeRed" style="width:300px"
                        :style="{ color: data.activeAdress == index ? '#DD2131' : '#fff' }">
                        <img src="../../assets/Image/address_red.png" alt="" v-if="data.activeAdress == index">
                        寄送至
                    </div>
                    <div class=" fontS20 co3 flex" style="flex:1">
                        <el-radio text-color="#333333" :label="index" size="large">{{}}</el-radio>
                        <div style="flex:1">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.street }}{{
                            item.detail
                        }} （{{ item.real_name }} 收）{{ item.phone }}</div>
                    </div>
                    <div class=" fontS18 cur" style="width:200px;text-align: right;"
                        :style="{ color: data.activeAdress == index ? '#5C7DCD' : '#fff' }" @click=" router.push({path:'/set',query:{index:2}})">修改本地址</div>
                </div>
            </el-radio-group>
        </div>
        <div class="title fontS16 flexJBC marB2">
            <span>确认订单信息</span>
        </div>
        <div class="fontS18 co6" style="height:60px;background-color:#F6F7F9;line-height:60px;">
            <span style="margin-left:124px;">商品信息</span>
            <span style="margin-left:480px;">单价</span>
            <span style="margin-left:180px;">数量</span>
            <span style="margin-left:180px;">优惠方式</span>
            <span style="margin-left:180px;">小计</span>
        </div>
        <div class="marB2" v-for="(item, index) in data.goodsInfo.list" :key="index">
            <div style="height:60px;line-height:60px;">
                {{ item.stroe_name }}
                <!-- <span class="co3 fonsS16"><el-checkbox v-model="checked2" label="芒果家鞋屋" size="large" /></span> -->
            </div>
            <div style="display: flex; height: 190px;border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc;box-sizing: border-box;padding-top: 10px;"
                v-for="(item1, index1) in item.goods" :key="index1">
                <div class=" fontS16" style="display: flex;line-height: 20px;width:594px">
                    <img :src="item1.image" style="height: 140px;width: 140px;" alt="">
                    <div style="margin-left: 20px;width: 290px;">
                        <p class="marB2 co6">
                            {{ item1.product_name }}
                        </p>
                        <p class="co9" style="margin-bottom: 10px;" >
                            <span v-if="item1.suk_name"> 规格:{{ item1.suk_name }}</span>
                           
                        </p>
                    </div>
                </div>
                <div style="width: 210px; " class="center">
                    <!-- <p class="fontS18 co9" style="text-decoration: line-through;">¥{{ item1.price }}</p> -->
                    <p class="fontS20 co6">¥{{ item1.price }}</p>
                </div>
                <div style="width: 230px;" class="center">
                    {{ item1.num }}
                    <!-- <el-input-number v-model="item1.num" :min="1" :max="9999" @change="handleChange" /> -->
                </div>
                <div style="width: 210px;" class="center">
                    <p class="fontS20 co9">无优惠</p>
                </div>
                <div style="width: 210px;text-align: right;">
                    <p class="fontS20 homeRed">¥{{ (item1.num * item1.price).toFixed(2) }}</p>
                </div>
            </div>
        </div>
        <div style="height:60px">
            <div class="flex" style="float: right;">
                <span>使用优惠券（优惠券不能抵扣运费）：</span>
                <el-select v-model="data.coupon_id" class="m-2" placeholder="请选择优惠券" size="large" @change="selchange">
                    <el-option v-for="item in data.goodsInfo.coupon" :key="item.coupon_id" :label="item.full_text"
                        :value="item.coupon_id" />
                </el-select>
            </div>
        </div>

        <div class="fontS16" style="height: 60px;background-color: #EFF3FF;line-height: 60px;">
            <span style="margin-left: 1030px;">运费：</span>
            <span style="margin-left: 10px;">¥{{ data.goodsInfo.total.total_free }}</span>
            <!-- <span style="margin-left: 40px;">（标准配送 DHL 预计8月19日送达）</span> -->

        </div>
        <div class="fontS16"
            style="height: 60px;line-height: 60px;border-bottom: 1px dashed #cccccc;margin-bottom: 40px;">
            <span style="float: right;"><el-checkbox v-model="checked1" label="匿名购买" size="large"
                    class="myRedCheckBox" /></span>
        </div>
        <div class="marB2" style="display: flex;justify-content: flex-end;">
            <div
                style="width: 640px;height: 140px;border: 1px solid #DD2131; padding: 20px 20px 0px 20px;box-sizing: border-box;">
                <p class="fontS16 co3 marB2" style="text-align: right;">
                    实付款：
                    <span class="fontS20 homeRed">￥</span>
                    <span class="fontS32 homeRed">{{ data.totalPriceall }} </span>
                </p>
                <p style="text-align: right;margin-bottom: 10px;">
                    <span class="co3 fontS16" style="font-weight: bold;">寄送至：</span>
                    <span class="co6 fontS16">{{ data.adresList[data.activeAdress].province }}{{
                        data.adresList[data.activeAdress].city
                    }}{{ data.adresList[data.activeAdress].district }}{{
    data.adresList[data.activeAdress].street
}}{{ data.adresList[data.activeAdress].detail }}
                    </span>
                </p>
                <p style="text-align: right;">
                    <span class="co3 fontS16" style="font-weight: bold;">收货人：</span>
                    <span class="co6 fontS16">{{ data.adresList[data.activeAdress].real_name }} {{
                        data.adresList[data.activeAdress].phone
                    }}</span>
                </p>
            </div>

        </div>
        <div style="display: flex;justify-content: flex-end;" @click="submit">
            <button class="sontS20"
                style="border: 0; background-color: #DD2131;color: white; width: 240px; height: 50px;margin-bottom: 100px;">提交订单</button>
        </div>
    </div>
</template>


<style lang="less" scoped>
.title {
    margin-top: 40px;
}

.ad_li {
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.padl {
    padding-left: 410px;
}

.add_check {
    background-color: #FFF4F5;
    border: 1px solid #DD2131;
    box-sizing: border-box;
}
</style>
